<template>
  <div class="relative">
    <div :class="readonly ? '' : 'box', innerClass"  class="number-input flex-grow">
      <!-- 输入框 -->
      <v-text-field type="number" :error-messages="props.errorMessages" :label="props.label" color="primary" variant="outlined"
        :readonly="props.readonly" :disabled="props.disabled"
        :background-color="props.backgroundColor ? props.backgroundColor : props.readonly ? '' : '#f5f5f5'"
        :placeholder="props.placeholder" @change="handleChange" v-model="nums">
        <template v-slot:append-inner>
          <div class="flex flex-column">
            <!-- 减 -->
            <v-btn class="plus-btn" variant="text" size="mini" v-ripple @click.stop.prevent="handlePlus">
              <svg-icon class="arrow-grey-btn" iconClass="menu-up-grey" size="24"></svg-icon>
              <svg-icon class="arrow-color-btn" iconClass="menu-up" size="24"></svg-icon>
            </v-btn>
            <!-- 加 -->
            <v-btn class="minus-btn" variant="text" size="mini" v-ripple @click.stop.prevent="handleMinus">
              <svg-icon class="arrow-grey-btn" iconClass="menu-down-grey" size="24"></svg-icon>
              <svg-icon class="arrow-color-btn" iconClass="menu-down" size="24"></svg-icon>
            </v-btn>
          </div>
        </template>
      </v-text-field>
    </div>

    <!-- 新提示 -->
    <mrc_ess_InputBottomTip :tip="props.tip" :tipDetail="props.tipDetail"></mrc_ess_InputBottomTip>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRaw, watch } from "vue";
const props = defineProps({
  valueLength: {
    type: [String, Number],
    default: 3
  },
  maxNumber: {
    type: [String, Number],
    default: 999999999999
  },
  minNumber: {
    type: [String, Number],
    default: 0
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  height: {
    type: String,
    default: "40",
  },
  placeholder: {
    type: String,
    default: "",
  },
  type: {
    type: [String],
    default: "number"
  },
  modelValue: {
    type: [Number, String],
  },
  label: {
    type: String,
    default: ""
  },
  backgroundColor: {
    type: String,
    default: ""
  },
  errorMessages: {
    type: String,
    default: ""
  },
  tip: {
    type: String,
    default: ""
  },
  tipDetail: {
    type: String,
    default: ""
  },
  innerClass: {
    type: String,
    default: ""
  }
})
const emit = defineEmits(["update:modelValue"]);
const nums = ref(Number(String(props.modelValue).replace(/[^\d]/g, "")));
initNums();
watch(() => props.modelValue, (val) => {
  nums.value = Number(String(props.modelValue).replace(/[^\d]/g, ""));
  initNums();
}, {
  immediate: true
})
function initNums() {
  if (props.type == "number" || props.type == "Number") {
    if (nums.value === "" || nums.value === undefined) {
      nums.value = props.minNumber;
    }
  } else {
    if (nums.value === "" || nums.value === undefined) {
      nums.value = "";
    } else {
      nums.value = PrefixInteger(nums.value, props.valueLength);
    }
  }
}
/**
 * 数值补零
 * @param num num传入的数字
 * @param n n需要的字符长度
 */
function PrefixInteger(num: number, n: any) {
  if (n === false) return num;
  return (Array(n).join("0") + num).slice(-n);
}
/**
 * 数值增加
 */
function handlePlus() {
  nums.value = Number(nums.value) + 1;
  checkNum();
  emit("update:modelValue", nums.value);
}
/**
 * 数值减少
 */
function handleMinus() {
  nums.value = Number(nums.value) - 1;
  checkNum();
  emit("update:modelValue", nums.value);
}
/**
 * 数值合法性的校验
 */
function checkNum() {
  if (props.type == "Number" || props.type == "number") {
    if (nums.value >= Number(props.maxNumber)) {
      nums.value = Number(props.maxNumber);
    }
    if (nums.value <= Number(props.minNumber)) {
      nums.value = Number(props.minNumber);
    }
  } else {
    if (Number(nums.value) <= 0) {
      nums.value = PrefixInteger(0, props.valueLength);
    } else {
      nums.value = PrefixInteger(Number(nums.value), props.valueLength);
    }
  }
}
/**
 * 输入框数值改变
 */
function handleChange() {
  nums.value = Number(String(toRaw(nums.value)).replace(/[^\d]/g, ""));
  checkNum();
  emit("update:modelValue", nums.value);
}
</script>

<style scoped>
.number-input :deep(.plus-btn.v-btn) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
  overflow: hidden;
}

.number-input :deep(.minus-btn.v-btn) {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  overflow: hidden;
}

.number-input :deep(.v-btn) {
  width: 24px !important;
  height: 15px !important;
  line-height: 15px !important;
  min-width: auto;
  min-height: auto;
}

.number-input :deep(.v-input__control),
.number-input :deep(.v-field__field) {
  height: 34px;
}

.number-input :deep(.v-input__control input) {
  height: 34px !important;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 34px !important;
}

.number-input :deep(.v-btn__content) {
  width: 24px !important;
  height: 15px !important;
  background-color: rgb(var(--v-theme-grey-lighten-4)) !important;
}

.number-input :deep(.v-input__details) {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -18px;
  pointer-events: none;
  padding: 0;
}

.number-input :deep(.v-field--appended) {
  padding-right: 6px !important;
}

.number-input :deep(.v-field__append-inner) {
  display: flex;
  align-items: center;
}

/* 输入框选中 */
.arrow-grey-btn {
  display: block;
}

.arrow-color-btn {
  display: none;
}

.number-input :deep(.v-field--focused .arrow-grey-btn) {
  display: none;
}

.number-input :deep(.v-field--focused .arrow-color-btn) {
  display: block;
}


.number-input :deep(input[type="number"]::-webkit-inner-spin-button) {
  -webkit-appearance: none;
    margin: 0;
}

.number-input :deep(input[type="number"]::-webkit-outer-spin-button) {
    -webkit-appearance: none;
    margin: 0;
}

.number-input :deep(input[type="number"]) {
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* 标准语法 */
}
</style>
